<script setup lang="ts">
import { reactive, ref } from 'vue'
const msg = "Hello World"
const count = 10
const price = 2.5
const isMarry: boolean = false
const money = 0 // 存款
const age = 20
const skills = "写代码"

// 声明函数
const getContent = () => {
  return "老高讲V3"
}
// 定义一个点击的函数
const clickFn = (a: number, b: number, c: number) => {
  alert("点我干嘛" + a)
}
const changeValue = (event: Event) => {
  const inputDom = event.target as HTMLInputElement
  console.log("值改变了", inputDom.value)
}
// 键盘事件对象 取自MDN-官方的W3c的标准文档
const enterClick = (event: Event) => {
  const obj = event as KeyboardEvent
  // const inputDom = event.target as HTMLInputElement
  if (obj.key === "Enter") {
    alert("您点击了回车")
  }
}
// 改变性别
const seperate = () => {
  isMarried.value = false
}
const changeSex = () => {
  person.sex = '女'
}
// 人类对象

const groupPeople = () => {
  people.value.money -= 100000
  people.value.childCount += 1
  people.value.weight += 10
  people.value.height -= 2
}
const groupBack = () => {
  people.value.money += 100000
  people.value.childCount -= 1
  people.value.weight -= 5
  people.value.height += 2
}

const person = reactive<{
  name: string,
  age: number,
  sex: "男" | "女"
}>({
  name: "张三",
  age: 24,
  sex: "男"
})
// @State person: xxx = { name: "张三",  }

// ref声明 简单或复杂数据类型
const isMarried = ref(false)
const people = ref<{ name: string, height: number, weight: number, money: number, childCount: number }>({
  name: '高大帅',
  height: 185,
  weight: 80,
  money: 9999999,
  childCount: 10
})

const weather = ref("晴转多云")

const feeling = ref(`<h2><strong style="color:blue"> 我的心情跌落到谷底-我emo了</strong></h2>`)

// 变脸
const changeFace = () => {
  feeling.value = `
     <h1 style="color: red">
        我发怒了
     </h1>

  `
}

</script>

<template>
  <div class="container">
    <!-- 插值表达式 -->
    {{ (msg + "Vue3").split("").reverse().join("") }}
    <p>总价：{{ count * price }}</p>
    <p>年龄：{{ `${age}岁` }}</p>
    <p>婚姻状态: {{ isMarry ? "已婚" : "未婚" }}</p>
    <p>存款状态: {{ money || "穷光蛋" }}</p>
    <p>技能：{{ skills }}</p>
    <p>函数调用: {{ getContent() }} </p>
    <p>1 + 2 {{ 1 + 2 }}</p>

    <button v-on:click="clickFn(1, 2, 3)">测试</button>
    <!-- 完整写法v-on:事件名="方法名" -->
    <!-- 语法糖的写法 @click -->
    <button @click="clickFn(1, 2, 3)">测试</button>
    <!-- change/input -->
    <input type="text" @change="changeValue" @keydown="enterClick">
    <h1>响应式数据Reactive-对象</h1>
    <p>姓名：{{ person.name }}</p>
    <p>年龄：{{ person.age }}</p>
    <p>性别:{{ person.sex }}</p>
    <button @click="person.sex = '女'">变性</button>
    <button @click="changeSex">变性</button>

    <h1>Ref响应式数据-简单数据类型</h1>
    <p>婚姻状态：{{ isMarried ? "已婚" : "单身🐶" }}</p>
    <button @click="isMarried = true">成家</button>
    <button @click="seperate">离婚</button>

    <h1>Ref响应式数据-复杂数据类型</h1>
    <p>姓名：{{ people.name }}</p>
    <p>身高{{ people.height }}cm</p>
    <p>体重{{ people.weight }}kg</p>
    <p>财产：{{ people.money }}$</p>
    <p>儿女个数：{{ people.childCount }}个</p>
    <button @click="groupPeople">成长</button>
    <button @click="groupBack">返老还童</button>

    <h1>v-text和v-html指令</h1>
    <div v-text="weather"></div>
    <div v-html="feeling"></div>
    <button @click="weather = '狂风暴雨'">变天</button>
    <button @click="changeFace">变脸</button>

  </div>
</template>

<style scoped>
.container {
  font-size: 30px;
  font-weight: bolder;
  color: brown
}
</style>
